<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>导航栏选中后高亮显示效果</title>
  <style>
    ul {
      list-style-type: none;
      display: flex;
    }

    ul > li {
      width: 180px;
      display: block;
      text-align: center;
      border: black 1px solid;

      background-color: bisque;
    }

    ul >li >a {
      color: brown;
      text-decoration: none;
    }

    .active{
      color: white;
      background-color: aqua;
    }
    li:hover{
        color: olivedrab;
      background-color: blue;
    }

    a:hover{
        color: cornsilk;
        background-color: red;
    }
  </style>
</head>
<body>
<div id="app">
  <ul>
    <li v-for="(content, index) in contents" v-on:click="itemClicked(index)" v-bind:class="{active: currentIndex === index}"><a href="https://www.baidu.com" >{{ content }}</a></li>
  </ul>
</div>
<script type="module">
  import {createApp, reactive, ref} from "../../../../../js/vue.esm-browser.js";

  const app = createApp({
    setup(){
      let  contents = reactive(["首页", "CSS 动画", "JavaScript 动画", "Servlet 代码", "Spring 代码"])
      let currentIndex = ref(null)

      function itemClicked(index){
        this.currentIndex = index
      }

      return {contents, currentIndex, itemClicked}
    }
  })

  app.mount("#app")
</script>
</body>
</html>